<!--  -->
<template>
  <div class="room">
    <el-container>
      <el-aside width="200px">
        <Left />
      </el-aside>
      <el-container>
        <el-main>
          <Top />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang='ts'>
import { reactive, ref, toRefs, onBeforeMount, onMounted } from "vue";
import { useStore } from "vuex";

import Left from "./tabarComponents/left.vue";
import Top from "./tabarComponents/top.vue";
interface DataProps {}
export default {
  name: "Door",
  components: { Top, Left },
  setup() {
    const store = useStore();
    let doorName = ref("房间");
    return { doorName };
  }
};
</script>
<style lang="scss">
.room {
  position: absolute;
  height: 100%;
  width: 100%;
}
.el-container {
  height: 100%;
  .el-col {
    width: 100%;
    height: 100%;
  }
  .el-menu-vertical-demo {
    height: 100%;
  }
}
.el-container {
  background: #f6f8f9;
}
.el-main {
  padding: 0;
}
.el-breadcrumb {
  height: 60px;
  line-height: 60px;
  padding: 0 30px;
  background: #fff;
}
</style>